<template>
	<view class="centent">
		<view class="head-img">
			<image class="img" src="https://yj.xiesinder.cn/prophet/svg/jwgl.svg" mode="scaleToFill" lazy-load="true"></image>
		</view>
		<view class="certification">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
				<u-form-item labelPosition="left" label="您的账号" prop="jwglAccount" borderBottom ref="item1">
					<u--input type="jwglAccount" v-model="model.jwglAccount" placeholder="请输入学号" border="none"></u--input>
				</u-form-item>
				<u-form-item labelPosition="left" label="新的密码" prop="jwglPassword" borderBottom ref="item1">
					<u--input :password="true" type="jwglPassword" v-model="model.jwglPassword" placeholder="请输入密码" border="none"></u--input>
				</u-form-item>
				<u-form-item labelPosition="left" label="确认密码" prop="newPassword" borderBottom ref="item1">
					<u--input :password="true" type="newPassword" v-model="model.newPassword" placeholder="请确认密码" border="none"></u--input>
				</u-form-item>
			</u--form>
			<view class="text1">
				连续使用错误的账号密码登录5次会锁定教务系统账户</br>
				若提示账号密码错误，请检查后再重试！！！
			</view>
			<u-button @click="submit" type="primary" text="提交修改" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			<view class="text2">
				忘记密码请到教务系统找回</br>
				教务系统地址：http://jwgl.thxy.cn/
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState, mapActions
	} from 'vuex'
	import {
		getJwglInfo, bindUpJwgl, synJwglData
	} from "@/plugins/api/jwglApi.js"
	export default {
		data() {
			return {
				model: {
					jwglAccount: '',
					jwglPassword: '',
					newPassword: ''
				},
				rules: {
					'jwglAccount': {
						type: 'string',
						required: true,
						message: '请输入教务账号',
						trigger: ['blur', 'change']
					},
					"jwglPassword": {
						type: 'string',
						required: true,
						message: '请输入教务密码',
						trigger: ['blur', 'change']
					},
					'newPassword': [
						{
							type: 'string',
							required: true,
							message: '请确认新密码',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								if (value == this.model.jwglPassword) {
									return true
								} else {
									return false
								}
							},
							message: '密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}
					]
				}
			}
		},
		created() {
			this.getJwglData()
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		computed: {
			...mapState('user', ['openId'])
		},
		methods: {
			...mapActions('user', ['setUserInfoAction', 'openIsJwglAction', 'closeIsJwglAction']),
			// 获取教务信息
			getJwglData() {
				getJwglInfo({
					openId: this.openId
				}).then(res => {
					this.model.jwglAccount = res.data.data.jwglAccount
					this.model.jwglPassword = res.data.data.jwglPassword
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					bindUpJwgl({
						wxOpenId: this.openId,
						jwglAccount: this.model.jwglAccount,
						jwglPassword: this.model.jwglPassword
					}).then(async res => {
						if (res.data.status == 0) {
							uni.$u.toast(res.data.msg + "...正在重新加载教务数据")
							// 重新绑定成功就会重新执行一次全量同步数据
							// 用户更改教务绑定信息，会对教务信息和个人教务信息进行重置
							synJwglData({
								openId: this.openId,
								sign: "sinder@1021"
							}).then(jwglRes => {
								// 异步执行，不会进来这里
							}).catch(err => {
								let that = this
								if (err.data == '') {
									that.openIsJwglAction() // 开始链接，其他的同步入口会校验isJwgl是否为true
									uni.$u.toast('数据同步中，5秒...')
									setTimeout(function() {
									  // 这里写要延时执行的代码
									  that.closeIsJwglAction()
									  // 成功跳转到课表页
									  uni.switchTab({
									  	url: "/pages/index/schedule"
									  })
									}, 5000); // 这里的 1500 表示延时的时间，单位是毫秒
								} else {
									uni.$u.toast(err.data.msg)
								}
							})
						} else {
							uni.$u.toast(res.data.msg)
						}
					}).catch(err => {
						uni.$u.toast(err.data.msg)
					})
				}).catch(errors => {
					uni.$u.toast('请检查输入是否有误')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.centent {
		width: 100%;
		height: auto;
		margin: 0 auto;
		
		.head-img {
			width: 100%;
			height: 150rpx;
			.img {
				width: 100%;
				height: 150rpx;
			}
		}
		
		.certification {
			width: 90%;
			margin: 0 auto;
			padding: 0 5% 30rpx 5%;
			box-shadow: 10rpx 10rpx #f3f3f3;
		}
		
		.text1 {
			text-align: left;
			margin: 30rpx 0 30rpx 0;
			color: #f3b7ad;
			font-size: 22rpx;
		}
		
		.text2 {
			text-align: center;
			margin: 30rpx 0 30rpx 0;
			color: #b5d9f3;
			font-size: 22rpx;
		}
	}
</style>